// 底部导航列表组件
<template>
  <div id="footer-list">
    <div class="item" v-for="(value,key) in listInfo" :key="key" :class="{'active':key == index}">
      <router-link :to="value.linkTo">
        <i :class="value.icon"></i>
        <span>{{value.name}}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listInfo: [
        {
          icon: 'icon-wxbmain',
          name: '主页',
          linkTo: '/'
        },
        {
          icon: 'icon-cart',
          name: '购物车',
          linkTo: '/cart'
        },
        {
          icon: 'icon-account',
          name: '我的',
          linkTo: '/home'
        }
      ]
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="stylus" scoped>
#footer-list
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  background: #ffffff
  display: flex
  align-items: center
  box-shadow: 0 0px 6px #ccc
  .item
    flex-grow: 1
    height: 44px
    text-align: center
    i, span
      display: block
      font-size: 14px
      color: #bfbfbf
      font-weight 700
    i
      font-size: 24px
      line-height: 30px
    &.active
      i, span
        color: #363636
</style>


